<!DOCTYPE html>
<html class="echarts-bg">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link href="../css/bootstrap.min14ed.css" rel="stylesheet">
  <link href="../css/style.min862f.css" rel="stylesheet">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link rel="stylesheet" href="../css/common.css">
  <title>入网车型比例</title>
  <style>
    .echarts-box{margin-bottom:0}
  </style>
</head>
<body class="gray-bg echarts">
  <div id="tbb" v-cloak>
      <!-- <div class="row echarts-head">
          <p class="echarts-head-hover">
            <img class="echarts-head-hover-img" :src="srcU" @click="fullChange">
          </p>
      </div> -->
      <div class="wrapper wrapper-content">
        <div class="row">
          <div class="echarts-box" id="resizePie">
            <div class="echarts-title">
              <div class="echarts-2-b">
                <div class="echarts-title-content">入网车型比例</div>
              </div>
            </div>
            <div class="echarts-box-content">
                <div id="pie"></div>
            </div>
          </div>
        </div>
      </div>
  </div>
  <!-- import JavaScript -->
  <script src="../js/ApiRequest.js"></script>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <script>
    var parentOrigin = null;
    var vm = new Vue({
      el: '#tbb',
      data: function() {
        return { 
          // 全屏切换
          srcS:true,
          srcU:"../img/ico/openFull.png",
          // 饼状图
          pie:"",
          myChartPie:"",
          optionPie:"",
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          this.pie = document.getElementById('pie')
          this.resizeChart()
          this.init()
        })
      },
      methods: {
        fullChange:function(){//切换全屏
          this.srcS = !this.srcS
          if(this.srcS){
            this.srcU = "../img/ico/openFull.png";
            fullExit()
          }else{
            this.srcU = "../img/ico/closeFull.png";
            fullOpen()
          }
        },
        resizeChart:function(){//reset echarts
          var appPie = document.getElementById('resizePie').offsetWidth;
          var winHeight = window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight;
          // this.pie.style.width = appPie + 'px';
          this.pie.style.height = winHeight-78 + 'px';
        },
        initEcharts:function(){//init echarts
          this.myChartPie = echarts.init(this.pie);
        },
        init:function(){
          this.initEcharts()
          this.showProportion()
        },        
        showProportion:function(){// 入网车型比例
          this.optionPie = {
              title: {
                  text: ''
              },
              legend: {
                orient: 'vertical',
                right: 30,
                top: 0,
                bottom: 0,
                // data:["微型","小型","紧凑型","中型","中大型","大型","SUV","MPV","跑车"],
                textStyle:{
                  color:"#ccc"
                }
              },
              color:['#00186a', '#032370','#052f75','#083a7b','#0b4580','#0d5086','#105c8b','#126791','#157296'] ,
              tooltip: {},
              series: [{
                  name: '',
                  type: 'pie',
                  radius: '55%',
                  // roseType: 'angle',
                  label:{
                    textStyle:{
                      color:"#ccc"
                    }  
                  },
                  data: storageLocal.get("pie").sort(function (a, b) { return a.value - b.value; }),
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }]
          };
          this.myChartPie.setOption(this.optionPie);
        },
      }
    })
    // 
    window.onload = function(){//接收index.html 的 入网车型比例信息
        window.addEventListener("storage", function (e) {
          if(e.key == "pie"){
            var data = storageLocal.get('pie');
            vm.optionPie.series[0].data = data.sort(function (a, b) { return a.value - b.value; });
            vm.myChartPie.setOption(vm.optionPie);
          }
        });
    }
    window.onresize = function () {//重置容器高宽
        vm.resizeChart();
        vm.myChartPie.resize();
    };
  </script>
</body>
</html>